<template>
	<view class="u-padding-20">
		<view class="con-body wrap">
			<view class="uni-flex-center">
					<view class="shadow_con u-margin-bottom-20 u-rela" v-for="(item, index) in activity" @click="activeDetail(item.id,item.status)">
							<view>
								<image style="width:100%;height:250rpx;" :src="item.image" mode="aspectFill"></image>
								<!-- <u-icon :name="" width="150" height="120"></u-icon> -->
							</view>
							<view class="u-padding-20">
								<view class="title_con">
									<text>{{item.title}}</text>
								</view>
								<view class="title_con2 u-rela">
									<text>主办方</text>
									<text class="u-abso pos_right">{{item.sponsor}}</text>
								</view>
								<view class="title_con2 u-rela">
									<text>活动地址</text>
									<text class="u-abso pos_right">{{item.address}}</text>
								</view>
								<view class="title_con2" v-if="item.limit == 0">
									<text>限制人数：不限</text>
									<text style="margin-left: 40rpx;color:#006971;">已参与人数:{{item.join}}人</text>
								</view>
								<view class="title_con2" v-else>
									<text>限制人数：{{item.limit}}人</text>
									<text style="margin-left: 40rpx;color:#006971;">已参与人数：{{item.join}}人</text>
								</view>
								<view v-if="item.free == 0" class="u-rela title_con4">
									<text>{{item.time}}</text>
									<text style="margin-left: 40rpx;font-size: 30rpx;font-weight: bold; color: red;" class="u-abso pos_right">免费</text>
								</view>
								<view v-else class="u-rela title_con4">
									<text>{{item.time}}</text>
									<text style="margin-left: 40rpx;font-size: 30rpx;font-weight: bold; color: red;" class="u-abso pos_right">￥{{item.price}}/人</text>
								</view>
							</view>
							<image v-if="item.status==-1" class="status_btn u-abso" src="https://resourse.cnlhjt.com/upload/20220825/23a08670c569a7ed00a0f6cc135c250b.png" mode=""></image>
					</view>
			</view>
		</view>
		<view v-if="type==2 || type==1" class="fabu" @click="activityRelease">
			<image src="../../static/release.png" mode="heightFix"></image>
		</view>
		<u-empty style="margin-top:120rpx;" :show="showEmpty" text="暂无数据" mode="list">
		</u-empty>
	</view>
</template>

<script>
	import cookie from "@/util/store/cookie"
	import {
		getActiveList
	} from "@/service/indexService.js";
	export default {
		data() {
			return {
				activity: [],
				page: 1,
				limit: 10,
				showEmpty:false,
				type:0
			}
		},
		onLoad() {
			this.type=cookie.get('type');
		},
		onShow() {
			getActiveList().then(this.getList);
		},
		methods: {
			getList(e) {
				if (e.code == 200) {
					this.activity = e.result;
					if(e.result.length==0){
						this.showEmpty = true;
					}else{
						this.showEmpty = false;
					}
				} else {
					this.showEmpty = true;
					this.activity = [];
				}
			},
			activeDetail(id,status) {
				uni.navigateTo({
					url:'./activitiesDetail?id='+id+'&status='+status
				})
			},
			activityRelease:function(){
				uni.navigateTo({
					url:'/pages/managerJobs/activityRelease'
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-empty.data-v-3d842a77 {
		margin-top:120rpx !important;
	}
	.shadow_con{
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 0 15rpx #ccc;
	}
	.title_con{
		font-size: 30rpx; font-weight: 800; color: #006971; font-family: Arial, Helvetica, sans-serif;
	}
	.title_con2{
		margin-top: 5rpx;
		color:#666;
		height:50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
	}
	
	.title_con4{
		margin-top: 15rpx;
		color: #666;
		font-size: 26rpx;
	}
	.wrap {
		width: 96%;
		margin-left: 2%;
		margin-bottom: 44rpx;
	}

	.iconType {
		display: flex;
		padding: 10rpx 10rpx;
		background-color: #fefefe;
		justify-content: space-between;
	}

	.icon {
		height: auto;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #13227a;
		font-size: 28rpx;
	}
	.status_btn{
		right:20rpx;
		bottom:210rpx;
		width:100rpx;
		height:100rpx;
		opacity: 0.5;
	}
	.fabu{
		position: fixed;
		bottom:150rpx;
		right:30rpx;
		width:100rpx;
		height:100rpx;
		// text-align: center;
		border-radius: 50%;
	}
	.fabu image{
		width:100rpx;
		height:100rpx;
	}
</style>

